<template>
	<div class="zh-ip">
		<nav-header></nav-header>
		<div class="zh-ip-content" v-loading="loading.status" :element-loading-text="loading.txt"
			v-loading.fullscreen.lock="loading.full">
			<h4 style="margin-top:0">当前网卡信息表</h4>
			<div class="zh-table">
				<div class="zh-table-contents">
					<el-table :data="ipData" border max-height="600" style="width: 100%">
						<el-table-column prop="name" label="网卡名" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="hwaddress" label="网络地址" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="address" label="IP地址" align="center" show-overflow-tooltip>
						</el-table-column>
						<!--  <el-table-column
					      prop="broadcast"
					      label="广播地址"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column> -->
						<el-table-column prop="netmask" label="子网掩码" align="center" show-overflow-tooltip>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="zh-form">
				<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-position="left" label-width="90px"
					class="zh-ruleForm">
					<ul>
						<li class="clear">
							<el-form-item label="网卡">
								<el-select v-model="ruleForm.iface_name" filterable placeholder="请选择网卡">
									<el-option v-for="(item, inx) in ipOptions" :key="inx" :label="item + ''" :value="item + ''">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="类型">
								<el-radio v-model="ruleForm.type" label="static">静态IP</el-radio>
								<el-radio v-model="ruleForm.type" label="dhcp">动态IP</el-radio>
							</el-form-item>
						</li>
						<li v-if="ruleForm.type === 'static'">
							<div class="clear">
								<el-form-item label="IP地址" prop="address">
									<el-input v-model="ruleForm.address" :maxlength="parseInt(15)" placeholder="请输入IP地址" clearable>
									</el-input>
								</el-form-item>
								<el-form-item label="子网掩码" prop="netmask">
									<el-input v-model="ruleForm.netmask" :maxlength="parseInt(15)" placeholder="请输入子网掩码" clearable>
									</el-input>
								</el-form-item>
							</div>
							<div class="clear">
								<!-- <el-form-item label="广播地址" prop="broadcast">
							    	<el-input v-model="ruleForm.broadcast" :maxlength="parseInt(15)" placeholder="请输入广播地址" clearable></el-input>
							  	</el-form-item> -->
								<el-form-item label="网关" prop="gateway">
									<el-input v-model="ruleForm.gateway" :maxlength="parseInt(15)" placeholder="请输入网关" clearable>
									</el-input>
								</el-form-item>
							</div>
						</li>
						<li class="clear">
							<!-- <el-form-item label="网络地址" prop="hwaddr">
						    	<el-input v-model="ruleForm.hwaddr" :maxlength="parseInt(15)" placeholder="请输入网络地址" clearable></el-input>
						  	</el-form-item> -->
						</li>
					</ul>
					<p style="font-size: 12px;">注意：无效的配置不会生效，不正确的配置会导致云平台无法连接！</p>
					<el-form-item style="marginTop: 50px">
						<el-button size="medium" type="primary" :disabled="saveTransformSetFlag" @click="resetData" plain
							class="reset-button">重置</el-button>
						<el-button size="medium" type="primary" :disabled="saveTransformSetFlag" @click="saveIface">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="cover" v-if="coverStatus">
				<div class="el-message-box">
					<div class="el-message-box__header">
						<div class="el-message-box__title">
							<span>提示</span>
						</div>
						<button type="button" aria-label="Close" class="el-message-box__headerbtn">
							<i class="el-message-box__close el-icon-close" @click="coverStatus = false"></i>
						</button>
					</div>
					<div class="el-message-box__content">
						<div class="el-message-box__message">
							<p style="padding-left: 30px;">
								<span style="font-size: 15px; color: #E6A23C;" class="el-icon-warning"></span>
								<span>修改成功，是否现在重启网络服务？</span>
							</p>
						</div>
						<div class="el-message-box__input" style="display: none;">
							<div class="el-input el-input--small">
								<input type="text" autocomplete="off" placeholder="" class="el-input__inner">
							</div>
							<div class="el-message-box__errormsg" style="visibility: hidden;"></div>
						</div>
					</div>
					<div class="el-message-box__btns">
						<button type="button" @click="coverStatus = false" class="el-button el-button--default el-button--small">
							<span>取消</span>
						</button>
						<button type="button" @click="restartNetworking"
							class="el-button el-button--default el-button--small el-button--primary ">
							<span>重启网络</span>
						</button>
						<!-- <button type="button" @click="restartServe" class="el-button el-button--default el-button--small el-button--primary ">
			                <span>重启服务器</span>
			            </button> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			saveTransformSetFlag: sessionStorage.getItem('CheckSchoolAppCode') == '00000000000000000000000000000000' ? false : true,
			coverStatus: false,
			loading: {
				status: false,
				txt: '获取数据...',
				full: false
			},
			ipData: [],
			ruleForm: {
				iface_name: '',
				address: '',
				netmask: '',
				broadcast: '',
				gateway: '',
				hwaddr: '',
				type: 'static',
			},
			rules: {
				address: [
					// { pattern: this.rules.ip.reg, message: this.rules.ip.msg, trigger: 'blur', required: true}
					{ required: true, message: '请输入正确的ip地址!', trigger: 'blur' },
					{ validator: this.isValidIP, trigger: 'blur' }
				],
				netmask: [
					{ pattern: this.rules.mask.reg, message: this.rules.mask.msg, trigger: 'blur', required: true }
				],
				gateway: [
					{ pattern: this.rules.ip.reg, message: '请输入正确的网关地址', trigger: 'blur' }
				],
			},
			ipOptions: [],
		}
	},

	created() {
		this.getIpData();
	},
	methods: {
		isValidIP(rule, value, callback) {
			let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
			let flag = reg.test(value);

			if (!flag) {
				callback(new Error('请输入正确的ip地址!'));
			} else {
				callback();
			}
		},
		/**
		 * 重置信息
		 */
		resetData() {
			this.ruleForm = {
				iface_name: '',
				address: '',
				netmask: '',
				broadcast: '',
				gateway: '',
				hwaddr: '',
				type: 'static',
			}

			this.$refs.ruleForm.clearValidate();

			this.getIpData();
		},
		getIpData() {
			let success = (data => {
				this.ipData = data.data.iface;
				this.ipOptions = data.data.if;
				// this.ruleForm.iface_name = this.ipOptions[0];
				// this.getIface();
			})
			this.$ajax.get('api/system/ip_data', { params: {}, func: { success: success } })
		},
		getIface() {
			this.loading.status = true;
			this.loading.txt = '获取数据...';
			this.loading.full = false;
			let success = (data => {
				this.loading.status = false;
				this.ruleForm.address = data.data.address.replace(/[\r\n]/g, "");
				this.ruleForm.type = data.data.iface.replace(/[\r\n]/g, "");
				this.ruleForm.netmask = data.data.netmask.replace(/[\r\n]/g, "");
				this.ruleForm.gateway = data.data.gateway.replace(/[\r\n]/g, "");
			})
			let fail = (data => {
				this.loading.status = false;
				this.$message.error(data.msg)
			})
			this.$ajax.get('api/system/iface', { params: { iface_name: this.ruleForm.iface_name }, func: { success: success, fail: fail } })
		},
		saveIface() {
			let success = (data => {
				this.coverStatus = true;
				// let yes = ( data => {
				// 	this.restartNetworking();
				// })
				// let cancel = ( data => {})
				// this.e_confirm({yes:yes,cancel:cancel,freecolse:false,txt:'修改成功，是否现在重启网络服务？'});
			})
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.$ajax.put('api/system/iface', this.ruleForm, { func: { success: success } })
				} else {
					return false;
				}
			});

		},
		restartNetworking() {
			this.coverStatus = false;
			this.loading.status = true;
			this.loading.txt = '重启网络...';
			this.loading.full = true;
			let success = (data => {
				this.$message.success(data.msg)
				this.loading.status = false;
				this.loading.txt = '';
				this.loading.full = false;
			})
			let fail = (data => {

			})
			let timeout = (data => {
				location.href = sessionStorage.getItem('protocol') + '://' + this.ruleForm.address + '/login';
			})
			this.$ajax.get('api/system/restart_networking', { params: {}, func: { success: success, fail: fail, timeout: timeout } })

			setTimeout(() => { location.href = sessionStorage.getItem('protocol') + '://' + this.ruleForm.address + '/login' }, 5000)

		},
		// restartServe(){
		// 	this.coverStatus = false;
		// 	this.loading.status = true;
		// 	this.loading.txt = '重启服务器...';
		// 	this.loading.full = true;
		// 	let success = ( data =>{
		// 		this.$message.success( data.msg )
		// 		this.loading.status = false;
		// 		this.loading.txt = '';
		// 		this.loading.full = false;
		// 	})
		// 	let fail = ( data =>{
		// 	})
		// 	let timeout = ( data =>{
		// 		location.href = sessionStorage.getItem('protocol') + '://' + this.ruleForm.address + '/user-login';
		// 	})
		// 	this.$ajax.get('api/system/restart_networking',{params:{ type: 1 },func:{success:success,fail:fail,timeout:timeout}})
		// },
		validateIP(rule, value, callback) {
			if (value === '') {
				return callback(new Error('请输入IP地址'))
			} else if (!validateIp(value)) {
				return callback(new Error('请输入正确格式的IP地址'))
			} else {
				callback()
			}

		},
		validateSubnet(rule, value, callback) {
			if (value === '') {
				return callback(new Error('请输入子网掩码'))
			} else if (!validateIp(value)) {
				return callback(new Error('请输入正确格式的子网掩码'))
			} else {
				callback()
			}

		},
	},
}
</script>
<style lang="scss">
.zh-ip {
	.zh-ruleForm {
		.el-form-item {
			float: left;
			width: 480px;

			.el-form-item__content {
				width: 240px;
			}
		}
	}

	.zh-form-button {
		width: 960px;
		margin: 40px 0;
		text-align: center;

		button {
			min-width: 100px;
		}
	}
}
</style>